<template>
  <!-- 参数设置 表单 -->
  <a-modal
    v-model:open="visible"
    title="参数设置"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="800"
    @cancel="cancel"
    centered
  >
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
    >
      <a-form-item label="参数名称：" name="name">
        <a-input
          ref="select"
          v-model:value="form.name"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="属性名称：" name="attrName">
        <a-input
          ref="select"
          v-model:value="form.attrName"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="参数类别：" name="paramType">
        <a-select
          v-model:value="form.paramType"
          class="formSelect"
          placeholder="请选择"
        >
          <a-select-option
            v-for="item in PARAM_TYPE"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select></a-form-item
      >
      <a-form-item label="报文类别："
        ><a-input
          ref="select"
          v-model:value="form.msgCode"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="计算公式："
        ><a-input
          ref="select"
          v-model:value="form.calcFormula"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="初始值："
        ><a-input
          ref="select"
          v-model:value="form.initValue"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="数据类别：" name="dataType">
        <a-select
          v-model:value="form.dataType"
          class="formInput"
          placeholder="请选择"
          @change="changeSupplierType"
          allow-clear
        >
          <a-select-option
            v-for="item in DATA_TYPE"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="排序：">
        <a-input
          ref="select"
          v-model:value="form.idx"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="单位：">
        <a-input
          ref="select"
          v-model:value="form.unit"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="储存类别：" name="storageType">
        <a-select
          v-model:value="form.storageType"
          class="formInput"
          placeholder="请选择"
          @change="changeSupplierType"
          allow-clear
        >
          <a-select-option
            v-for="item in modelStorageList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="小数位：">
        <a-input-number
          ref="select"
          v-model:value="form.scale"
          class="formInput"
          placeholder="请输入"
          :controls="false"
        />
      </a-form-item>
      <a-form-item label="告警规则："
        ><a-select
          v-model:value="form.evtRule"
          class="formSelect"
          placeholder="请选择"
        >
          <a-select-option
            v-for="item in EVT_RULE"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="告警类别："
        ><a-select
          v-model:value="form.evtType"
          class="formSelect"
          placeholder="请选择"
        >
          <a-select-option
            v-for="item in EVT_TYPE"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="状态："
        ><a-select
          v-model:value="form.enable"
          class="formSelect"
          placeholder="请选择"
        >
          <a-select-option
            v-for="item in MODEL_PARAMS_STATUS_LIST"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select></a-form-item
      > -->
      <a-form-item label="描述：">
        <a-textarea
          v-model:value="form.paramDesc"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>


import {
  MODEL_PARAMS_STATUS_LIST,
  PARAM_TYPE,
  DATA_TYPE,
  DATA_RULE,
  EVT_RULE,
  EVT_TYPE,
} from "@/constants/stationConfig";
const $api = inject("$api");
const props = defineProps({
  addParamVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  paramRowData: {
    type: Object,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  modelStorageList: {
    type: Boolean,
    default: Array,
  }
});
const visible = ref(props.addParamVisible);
const emits = defineEmits(["update:addParamVisible", "getModelParamPage"]);
watch(
  () => props.addParamVisible,
  (val) => {
    visible.value = val;
    if (val && props.isEdit) {
      form.value = {
        ...props.paramRowData,
      };
    }
  }
);
const labelCol = { style: { width: "110px" } };
const formRef = ref(null);
const form = ref({
  name: undefined,
  attrName: undefined,
  initValue: undefined,
  dataType: undefined,
  idx: undefined,
  unit: undefined,
  storageType: undefined,
  scale: undefined,
  evtRule: undefined,
  evtType: undefined,
  enable: undefined,
  paramDesc: undefined,
  calcFormula: undefined,
  paramType: undefined,
  dataRule: undefined,
});
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  attrName: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  paramType: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
  dataType: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
  storageType: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
});
const cancel = () => {
  emits("update:addParamVisible", false);
  form.value = {
    name: undefined,
    attrName: undefined,
    initValue: undefined,
    dataType: undefined,
    idx: undefined,
    unit: undefined,
    storageType: undefined,
    scale: undefined,
    evtRule: undefined,
    evtType: undefined,
    enable: undefined,
    paramDesc: undefined,
    calcFormula: undefined,
    paramType: undefined,
    dataRule: undefined,
  };
  formRef.value.clearValidate();
};
const loading = ref(false);
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      const params = {
        ...form.value,
        modelId: props.rowData.id,
      };
      if (props.isEdit) {
        // 编辑带上id
        params.id = props.paramRowData.id;
      }
      loading.value = true;
      const res = await $api.modelParam(params, props.isEdit ? "put" : "post");
      loading.value = false;
      if (res && res.code === 0) {
        message.success(props.isEdit ? "编辑成功" : "新增成功");
        cancel();
        emits("getModelParamPage");
      }
    })
    .catch((error) => {
      console.log("error", error);
    });
};
</script>

<style lang="less" scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.formInput,
.formSelect {
  width: 250px;
}
.ant-form-item {
  margin-top: 20px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
</style>